<template>
    <div>
      <popup :value="true" height="100%" :should-rerender-on-show="true" :show-mask="false"
          :hide-on-blur="false" :popup-style="{'z-index':1000}">
      <x-header v-bind:left-options="{backText:''}">
        <span>个人信息</span>
      </x-header>
      <div class="content">
        <div class="top">
          <img src="../../assets/img/test_icon.jpg" alt="" class="head-img" >
          <p class="person-name">{{item.USER_FULLNAME}}</p>
          <p class="person-name-en">{{item.USER_NAME}}</p>
        </div>
        <ul>
          <li class="personinfo-item" style="display: flex;align-items: flex-start;justify-content: flex-start">
              <span class="personinfo-item-name" style="white-space: nowrap">部门</span>
              <span class="personinfo-item-detail" style="margin-left: 24px">{{item.THIRD_DEPTNAME}}</span>
          </li>
          <li>
            <p class="personinfo-item-over">{{item.FIRST_DEPTNAME}}</p>
          </li>
          <li class="personinfo-item">
            <span class="personinfo-item-name">手机</span>
            <span class="personinfo-item-detail">{{item.TELEPHONE_CODE}}</span>
          </li>
          <li class="personinfo-item">
            <span class="personinfo-item-name">固话</span>
            <span class="personinfo-item-detail">0571-88888888</span>
          </li>
          <li class="personinfo-item">
            <span class="personinfo-item-name">邮箱</span>
            <span class="personinfo-item-detail">{{item.EMAIL?item.EMAIL: "无"}}</span>
          </li>
        </ul>
        <x-button type="default" class="btn btn1">发送消息</x-button>
        <x-button type="default" class="btn btn2">拨打电话</x-button>
      </div>
      </popup>
    </div>
</template>

<script>
    import XButton from "vux/src/components/x-button/index";
    export default {
        name: "person",
        components: {XButton},
        data(){
          return {
            // info:{},
            img:'',
            item: this.$route.params.item,
          }
        },
        method: {
          getPhoto(url) {
          let ipos = url.lastIndexOf(".");
          let fileType = url.substring(ipos + 1);
            this.$http({
              method: 'post',
              url: this.getReqUrl(this.WXAPI_URL,"ac=thumb&filename="+this.row.userno+'.'+fileType+'&url='+url),
              data: {
               
              }
            }).then((res) => {
                   this.img = this.PREVIEW_URL + res.data.name
            })
          },
        },
        computed:{
          row() {debugger
            return this.$store.state.currentRow;
          }
        }
    }
</script>

<style scoped>
  .content{
    padding: 20px 77px 0 77px;
    background-color: #ffffff;
    height: calc(100% - 42px);
    box-sizing: border-box;
  }
  .content ul li{
    display: block;
  }
  .top{
    text-align: center;
  }
  .head-img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .person-name{
    font-size: 18px;
    line-height: 18px;
    margin-top: 20px;
  }
  .person-name-en{
    font-size: 14px;
    line-height: 14px;
    margin-top: 16px;
  }
  .personinfo-item{
    margin-top: 15px;
  }
  .personinfo-item-name{
    font-size: 14px;
  }
  .personinfo-item-detail{
    font-size: 14px;
    color: #9F9F9F;
    margin-left: 20px;
    display: inline-block;
    max-width: 168px;
    word-break: break-all;
  }
  .personinfo-item-over{
    font-size: 14px;
    color: #9F9F9F;
    width: 100%;
    padding-left: 53px;
    display: inline-block;
  }
  .btn{
    width: 100%;
    height: 43px;
    background-color: #4852D0;
    color: #ffffff;
    font-size: 14px;
    border-radius: 2px;
  }
  .btn1{
    margin-top: 71px;
  }
  .btn2{
    margin-top: 22px;
  }
</style>
